<template>
  <div>
    <oolongCheckbox :checked="single">Checkbox</oolongCheckbox>
    <br><br>
    <oolongCheckboxGroup :value="social">
      <oolongCheckbox value="twitter">
        <oolongIcon type="social-twitter"></oolongIcon>
        <span>Twitter</span>
      </oolongCheckbox>
      <Checkbox value="facebook">
        <oolongIcon type="social-facebook"></oolongIcon>
        <span>Facebook</span>
      </Checkbox>
      <oolongCheckbox value="github">
        <oolongIcon type="social-github"></oolongIcon>
        <span>Github</span>
      </oolongCheckbox>
      <oolongCheckbox value="snapchat">
        <oolongIcon type="social-snapchat"></oolongIcon>
        <span>Snapchat</span>
      </oolongCheckbox>
    </oolongCheckboxGroup>
    <br><br>
    <oolongCheckboxGroup :value="fruit">
      <oolongCheckbox value="香蕉">香蕉</oolongCheckbox>
      <oolongCheckbox value="苹果">苹果</oolongCheckbox>
      <oolongCheckbox value="橘子">橘子</oolongCheckbox>
    </oolongCheckboxGroup>
  </div>
</template>
<script>

  export default{
    data(){
      return {
        single: false,

        social: ['facebook', 'github'],
        fruit: ['苹果']
      }
    }
  }
</script>
<style lang="scss" scoped>

</style>
